<template>
  <div class="setting">
    <!-- 主题设置 -->
    <n-form :model="theme" class="theme">
      <n-form-item label="头部背景颜色" path="headBackgroundColor">
        <n-color-picker v-model:value="theme.headBackgroundColor" :show-alpha="false" />
      </n-form-item>
      <n-form-item label="头部按钮鼠标悬停背景色" path="headButtonMouseHoverBackgroundColor">
        <n-color-picker v-model:value="theme.headButtonMouseHoverBackgroundColor" :show-alpha="false" />
      </n-form-item>
      <n-form-item label="头部图标颜色" path="headIconColor">
        <n-color-picker v-model:value="theme.headIconColor" :show-alpha="false" />
      </n-form-item>
      <n-form-item label="头部关闭按钮悬停背景色" path="theHeadClosedButtonHoveringBackgroundColor">
        <n-color-picker v-model:value="theme.theHeadClosedButtonHoveringBackgroundColor" :show-alpha="false" />
      </n-form-item>
      <n-form-item label="头部关闭按钮悬停图标颜色" path="theHeadClosedButtonHoveringIconColor">
        <n-color-picker v-model:value="theme.theHeadClosedButtonHoveringIconColor" :show-alpha="false" />
      </n-form-item>
      <n-form-item label="头部字体颜色" path="headFontColor">
        <n-color-picker v-model:value="theme.headFontColor" :show-alpha="false" />
      </n-form-item>
      <n-form-item label="背景颜色" path="backgroundColor">
        <n-color-picker v-model:value="theme.backgroundColor" :show-alpha="false" />
      </n-form-item>
      <n-form-item label="编辑器工具栏图片颜色" path="editorSToolbarPictureColor">
        <n-color-picker v-model:value="theme.editorSToolbarPictureColor" :show-alpha="false" />
      </n-form-item>
      <n-form-item label="编辑器右侧工具栏选中背景色" path="editorSRightToolbarSelectedBackgroundColor">
        <n-color-picker v-model:value="theme.editorSRightToolbarSelectedBackgroundColor" :show-alpha="false" />
      </n-form-item>
      <n-form-item label="编辑器右侧工具栏选中图标颜色" path="editorSRightToolbarSelectIconColor">
        <n-color-picker v-model:value="theme.editorSRightToolbarSelectIconColor" :show-alpha="false" />
      </n-form-item>
      <n-form-item label="输入行背景色" path="enterTheBackgroundColor">
        <n-color-picker v-model:value="theme.enterTheBackgroundColor" :show-alpha="false" />
      </n-form-item>
      <n-form-item>
        <n-button dashed type="info" @click="defaultTheme">默认主题</n-button>
      </n-form-item>
    </n-form>
  </div>
</template>
<script setup lang="ts">
  import { ref, watch } from 'vue';
  import { onBeforeRouteLeave } from 'vue-router';
  import { readTheme, writeTheme, setTheme, configTheme } from '@/theme/theme';

  let theme = ref();
  theme.value = readTheme();
  // 当页面跳转时，写入主题设置
  onBeforeRouteLeave((leaveGuard: object) => {
    writeTheme(theme.value);
  });
  // 默认主题
  function defaultTheme() {
    // 默认主题
    setTheme(configTheme());
    theme.value = configTheme();
    //重写watch方法，防止点击事件后，watch方法不触发
    watch(theme.value, (newValue: object, oldValue: object) => {
      setTheme(newValue);
    });
  }
  //实时修改
  watch(theme.value, (newValue: object, oldValue: object) => {
    writeTheme(newValue);
  });
</script>
<style scoped lang="scss">
  .setting {
    -webkit-user-select: none;
    user-select: none;
    height: calc(100vh - 30px);
    overflow-y: scroll;
    //修改滚动条样式
    &::-webkit-scrollbar {
      width: 6px;
    }
    &:hover::-webkit-scrollbar-thumb {
      background-color: rgba(144, 147, 153, 0.3);
      border-radius: 4px;
    }
    &::-webkit-scrollbar-track {
      background-color: rgba(0, 0, 0, 0);
      border-radius: 4px;
    }

    .theme {
      width: 80%;
      margin: 20px;
    }
  }
</style>
